<template>
  <div class="bottom">
    <div class="content flexBetween1">
      <div class="left">
        <div style="width:580px;position: relative">
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="政策法规">
              <ul>
                <li v-for="(item,index) in policiesRegulations" :key="index" @click="toDetail(1,index+1,item.content)">
                  <div class="flexBetween1 li-content">
                    <div class="flexStart1">
                      <span class="dot"></span>
                      <div>{{item.content}}</div>
                    </div>
                    <div class="time">{{item.time}}</div>
                  </div>
                </li>
              </ul>
            </a-tab-pane>
            <a-tab-pane key="2" tab="教育培训" force-render>
              <ul>
                <li v-for="(item,index) in educationTraining" :key="index" @click="toDetail(2,index+1,item.content)">
                  <div class="flexBetween1 li-content">
                    <div class="flexStart1">
                      <span class="dot"></span>
                      <div>{{item.content}}</div>
                    </div>
                    <div class="time">{{item.time}}</div>
                  </div>
                </li>
              </ul>
            </a-tab-pane>
          </a-tabs>
          <div class="more1" @click="moreList(tabKey)" v-if="this.tabKey=='1'">更多>></div>
          <div class="more1" @click="moreList(tabKey)" v-if="this.tabKey=='2'">更多>></div>
        </div>
      </div>
      <div class="right">
        <div class="flexBetween1">
          <div class="tit">曝光台</div>
          <div class="more" @click="moreList(3)">更多>></div>
        </div>
        <div>
          <ul>
            <li v-for="(item,index) in complaintsProtection" :key="index" @click="toDetail(3,index+1,item.title)">
              <div class="flexBetween1 li-content">
                <div class="flexStart1">
                  <span class="dot"></span>
                  <div>{{item.title}}</div>
                </div>
                <div class="time">{{item.time}}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="company flexCenter">技术支持：南京飞博智能交通技术有限公司</div>
  </div>
</template>

<script>
export default {
  name: "bottom",
  data() {
    return {
      policiesRegulations: [
        // { content: "保障中小企业款项支付条例", time: "2020-07-14" },
        // {
        //   content: "两部门要求6月底前完成暂缓缴存农民工工资保证金政策落地",
        //   time: "2020-06-28"
        // },
        {
          content:
            "绝不让薪酬变成“薪愁”——中国首部保障农民工工资权益的专门性法规5月起施行",
          time: "2020-05-20"
        },
        // {
        //   content:
        //     "人力资源社会保障部公布2020年第一批拖欠农民工工资“黑名单”信息表",
        //   time: "2020-05-09"
        // },
        {
          content: "《保障农民工工资支付条例》5月1日正式实施",
          time: "2020-05-06"
        },
        // {
        //   content:
        //     "人力资源社会保障部公布2020年第一批拖欠农民工工资“黑名单”信息表",
        //   time: "2020-04-22"
        // },
        // {
        //   content: " 《保障农民工工资支付条例》5月1日正式实施",
        //   time: "2020-04-03"
        // }
      ],
      educationTraining: [
        { content: "进场安全基本要求", time: "2020-08-28" },
        { content: "重要法律法规条文摘录", time: "2020-07-13" },
        // { content: "建筑工程安全生产常用法律法规", time: "2020-04-22" },
        // { content: "安全生产法律法规体系", time: "2020-04-14" },
        // { content: "钢筋混凝土结构基本知识", time: "2020-04-13" },
        // { content: "建筑施工安全基础知识", time: "2020-04-03" }
      ],
      complaintsProtection: [
        {
          title: "公布2020年第二批拖欠劳动报酬典型案件",
          time: "2020-07-24"
        },
        {
          title: "人力资源社会保障部公布2020年第一批拖欠劳动报酬典型案件",
          time: "2020-05-09"
        },
        // {
        //   title: "公布2020年第一批拖欠劳动报酬典型案件",
        //   time: "2020-04-29"
        // },
        // {
        //   title: "公布2019年第四批拖欠劳动报酬典型案件",
        //   time: "2020-01-14"
        // },
        // {
        //   title: "公布2019年第四批百名拖欠农民工工资“黑名单”",
        //   time: "2020-01-07"
        // }
      ],
      tabKey: "1"
    };
  },
  methods: {
    callback(key) {
      this.tabKey = key;
    },
    moreList(key) {
      if (key == "1") {
        this.$router.push({ path: "/policiesAndRegulations/list" });
      } else if (key == "2") {
        this.$router.push({ path: "/educationAndTraining/list" });
      } else{
        this.$router.push({ path: "/complaint/list" });
      }
    },
    toDetail(key,flag,content) {
       if (key == "1") {
        this.$router.push({ path: "/policiesAndRegulations/detail" ,query:{flag:flag,content:content}});
      } else if (key == "2") {
        this.$router.push({ path: "/educationAndTraining/detail" ,query:{flag:flag,content:content}});
      } else if (key == "3") {
        this.$router.push({ path: "/complaint/detail" ,query:{flag:flag,content:content} });
      }
    }
  }
};
</script>

<style scoped>
.bottom {
  width: 100%;
  background: #f6f6f6;
  font-family: Microsoft YaHei;
  padding-top: 38px;
  padding-bottom: 29px;
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.more1 {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  font-weight: 400;
  color: #1492ff;
  line-height: 73px;
}
.tit {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 58px;
}
::v-deep .ant-tabs-nav .ant-tabs-tab {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 58px;
  padding: 0;
  /* margin: 0; */
  /* border-right: 1px solid #ccc; */
  margin-right: 30px;
}
::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  color: #1890ff;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:last-child {
  padding: 0;
  border: none;
}
.more {
  font-size: 16px;
  font-weight: 400;
  color: #1492ff;
  line-height: 73px;
}
.more,
.more1 {
  cursor: pointer;
}
.left,
.right {
  width: 580px;
}
ul {
  width: 580px;
  height: 330px;
  background: white;
  padding-left: 15px;
  color: #333333;
  font-family: Microsoft YaHei;
  font-size: 16px;
}
li {
  list-style: none;
  line-height: 40px;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 3.5px;
  margin-right: 10px;
  background: #fff;
  border: 1px solid #1492ff;
}
.time {
  font-size: 14px;
  color: #ccc;
  margin-right: 10px;
}
.company {
  font-size: 14px;
  font-weight: 400;
  color: #45484b;
  /* line-height: 31px; */
}
ul {
  margin-bottom: 74px;
  /* overflow-y: scroll; */
  padding: 26px 17px;
}
::v-deep .ant-tabs-bar {
  border: none;
}
.flexStart1 div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 390px;
}
.li-content:hover .flexStart1 div {
  color: #1492ff;
  cursor: pointer;
}
.li-content:hover .dot {
  background: #1492ff;
}
</style>
